<template>
  <div>
    <h2>这是一个App容器组件==={{num}}</h2>
    <button @click="num++">更新数字</button>
    <hr />
    <!-- <HellWorld></HellWorld> -->
    <hr />
    <!-- <Faa></Faa> -->
    <button @click="comName='Left'">切换成left</button>
    <button @click="comName='Right'">切换成right</button>
    <component :is="comName"></component>
    <hr>
    <Demo></Demo>
  </div>
</template>

<script>
import { h, ref, provide } from 'vue';
import HellWorld from './components/HelloWorld.vue';
import Foo from './components/Foo.vue';
import Demo from './components/Demo.vue';
import Faa from './components/Faa.vue';
import Left from './components/Left.vue';
import Right from './components/Right.vue';

export default {
  name: 'App',
  data() {
    return {
      comName: 'Left'
    };
  },
  components: {
    HellWorld,
    Foo,
    Demo,
    Faa,
    Left,
    Right
  },
  setup() {
    let num = ref(10);

    // 父级组件准备传递的数据
    provide('aaa', num);
    return {
      num
    };
  }
};
</script>

<style>
</style>
